博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序 生成携带参数的小程序码
阅读量:6582 次
发布时间:2019-06-24

本文共 3351 字,大约阅读时间需要 11 分钟。

第一步第二步都要必须由后端完成,返回图片地址给前端!!原因??如下图:

想了解,想尝试的可以看看:

第一步:获取ACCESS_TOKEN

// 这一步 前端可以试试请求玩玩,一般由后端获取access_Token。后端请求微信API接口时会用到这个access_Token,前端再请求会造成重复请求,会使之前的access_token过期。

第二步:获取小程序二维码并渲染:

wx.request({        // url:'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + accessToken, // a        // url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + accessToken, // b        url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token' + accessToken, // c        method: "POST",        data: {            'path': "/pages/index/index?openid=" + openid,  // 携参数openid            'width': '430'        },        responseType: 'arraybuffer',        success: function (res) {            console.log(res.data)   // 二维码            that.setData({                qrcode: res.data            })        },        fail: function (res) {            console.log('fail')        }    })复制代码

最后结果会出现小程序乱码,(这是个二进制流文件):

解决? 可以利用微信小程序拓展接口,(后台转二进制流也是可以的,后台获取后,直接保存为图片,然后将图片路径返回给前台)。

wx.arrayBufferToBase64(arrayBuffer) 可以将二进制流转为base64,

// 前端请求完整方法:

wx.request({        // url:'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + accessToken, // a        // url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + accessToken, // b        url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token' + accessToken, // c        method: "POST",        data: {            'path': "/pages/index/index?openid=" + openid,  // 携参数openid                'width': '430'        },        responseType: 'arraybuffer', // arraybuffer是以数组的语法处理二进制数据,称为二进制数组。        success: function (res) {            let data = wx.arrayBufferToBase64(res.data);            that.setData({                qrcode: 'data:image/png;base64,' + data            })        },        fail: function (res) {            console.log('fail')        }    })复制代码

wxml文件:

复制代码

这样二维码就可以出现了,


首页获取二维码参数

onLoad: function (options) {    // console.log(options.openid)     if (options.openid) {        wx.setStorageSync('openid', options.openid) // 将openid缓存    }}要使用的时候,拿缓存则:let openid = wx.getStorageSync("openid");复制代码

如果后端给你传的是base64?

那么恭喜你,本该传图片路径给你... 解决base64图片显示的方法:

var array = wx.base64ToArrayBuffer(res.data.data)var base64 = wx.arrayBufferToBase64(array)if (res.statusCode == 200) {    that.setData({        qrcode: 'data:image/jpeg;base64,' + base64,  // data 为接口返回的base64字符串      })}复制代码

附:前端请求获取access_token与小程序二维码(试试)

wx.request({            // 获取token            url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',            data: {                appid: '***',  // 小程序appid                secret: '***' // 小程序秘钥            },            success(res) {                // res.data.access_token                 wx.request({                    url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + res.data.access_token,                    method: 'POST',                    data: {                        'path': "/pages/index/index",                        "width": 430                    },                    success(res) {                        console.log(res.data)                        // 后台转二进制流,后台获取后,直接保存为图片,然后将图片路径返回给前台                        // 前端转,如上                     }                })            }        })复制代码

转载于:https://juejin.im/post/5b9b8772e51d450e9162a271

你可能感兴趣的文章
mysql的优化:官网地址
查看>>
Selenium 进行web自动化测试
查看>>
python多线程多进程
查看>>
JJTree Tutorial for Advanced Java Parsing
查看>>
[Android Samples视频系列之ApiDemos]App-Activity-Forwarding
查看>>
20135306第十四周学习总结
查看>>
AutoMapper 5.0-升级指南
查看>>
DCOM中的APPID的用处,以及RemoteServerName的传递问题
查看>>
MYSQL的服务不见了
查看>>
去哪儿网支付系统架构演进全历程阅读心得
查看>>
需求分析及对IT行业创新的理解
查看>>
Spring MVC 处理静态资源不能访问问题
查看>>
Toad常用快捷键
查看>>
hdu 1022 Train Problem I(栈)
查看>>
ZooKeeper学习第一期---Zookeeper简单介绍
查看>>
找众数
查看>>
usaco Scrambled Letters
查看>>
git不能先commit后再pull
查看>>
酒店之王 最大流
查看>>
【模板】矩阵加速(数列) 矩阵快速幂
查看>>